// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Item {
    id: status_bar
    width: 400
    height: 0

    property string color_code: "grey"
    property string string_status: ""

    function show(color, status)
    {
        color_code = color;
        string_status = status;
        status_bar.state = "show";
        timer_status.running = true;
    }

    Rectangle {
        id: rectangle_bg
        color: "grey"
        anchors.fill: parent
    }

    Rectangle {
        id: rectangle_status
        color: color_code
        anchors.fill: parent
        opacity: 0

//        Behavior on opacity {
//            NumberAnimation { duration: 200 }
//            enabled:
//            {
//                if (rectangle_status.opacity == 1)
//                    return true;
//                else
//                    return false;
//            }
//        }
    }

    Text {
        id: text_status
        x: -width
        y: 22
        width: parent.width - 40
        color: "#ffffff"
        text: string_status
        verticalAlignment: Text.AlignVCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 33
    }

//    Connections
//    {
//        id: conn_backend
//        target: backend

//        onSend_status:
//        {
//            status_bar.state = "";
//            color_code = color;
//            string_status = status;
//            status_bar.state = "show";
//        }
//    }

    Timer
    {
        id: timer_status
        interval: 5000
        running: false
        repeat: false

        onTriggered:
        {
            status_bar.state = "";
        }
    }

    states: [
        State {
            name: "show"

            PropertyChanges {
                target: text_status
                x: 20
            }

            PropertyChanges {
                target: rectangle_status
                opacity: 1
            }

            PropertyChanges {
                target: status_bar
                height: 60
            }
        }
    ]

    transitions: [
        Transition {
            from: ""
            to: "show"
            ParallelAnimation {
                PropertyAnimation { target: status_bar; property: "height"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: rectangle_status; property: "opacity"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: text_status; property: "x"; easing.type: Easing.OutCubic;}
            }
        },
        Transition {
            from: "show"
            to: ""
            ParallelAnimation {
                PropertyAnimation { target: text_status; property: "x"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: rectangle_status; property: "opacity"; easing.type: Easing.OutCubic;}
                PropertyAnimation { target: status_bar; property: "height"; easing.type: Easing.OutCubic;}
            }
        }
    ]
}
